<!-- 全系统监控总览 -->
<template>
	<div class="app-container">
		<!-- 监控概况 -->
		<el-row type="flex" justify="center" :gutter="20">
			<el-col :span="4">
				<div class="monitor-overview-card card-animate-first">
					<el-row>
						<el-col :span="24" class="monitor-overview-title">业务系统</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">不健康</el-col>
						<el-col :span="10" class="monitor-overview-unhealth-text">
							<count-to :start-val="0" :end-val="monitorOverview.systemUnhealthTotal" :duration="2000" />
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">总数</el-col>
						<el-col :span="10" class="monitor-overview-total-text">
							<count-to :start-val="0" :end-val="monitorOverview.systemTotal" :duration="2000" />
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="monitor-overview-card card-animate-second">
					<el-row>
						<el-col :span="24" class="monitor-overview-title">应用组件</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">不健康</el-col>
						<el-col :span="10" class="monitor-overview-unhealth-text">
							<count-to :start-val="0" :end-val="monitorOverview.segmentUnhealthTotal" :duration="2000" />
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">总数</el-col>
						<el-col :span="10" class="monitor-overview-total-text">
							<count-to :start-val="0" :end-val="monitorOverview.segmentTotal" :duration="2000" />
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="monitor-overview-card card-animate-third">
					<el-row>
						<el-col :span="24" class="monitor-overview-title">业务</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">不健康</el-col>
						<el-col :span="10" class="monitor-overview-unhealth-text">
							<count-to :start-val="0" :end-val="monitorOverview.businessUnhealthTotal" :duration="2000" />
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">总数</el-col>
						<el-col :span="10" class="monitor-overview-total-text">
							<count-to :start-val="0" :end-val="monitorOverview.businessTotal" :duration="2000" />
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="monitor-overview-card card-animate-fourth">
					<el-row>
						<el-col :span="24" class="monitor-overview-title">业务访问量</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">不健康</el-col>
						<el-col :span="10" class="monitor-overview-unhealth-text">
							<count-to :start-val="0" :end-val="monitorOverview.businessVisitUnhealthTotal" :duration="2000" />
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">总数</el-col>
						<el-col :span="10" class="monitor-overview-total-text">
							<count-to :start-val="0" :end-val="monitorOverview.businessVisitTotal" :duration="2000" />
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="monitor-overview-card card-animate-fifth">
					<el-row>
						<el-col :span="24" class="monitor-overview-title">用户数</el-col>
					</el-row>
					<el-row>
						<!-- <el-col :span="10">总数</el-col> -->
						<el-col style="color: #ffffff; text-align: center; padding-top: 5.5%">
							<count-to :start-val="0" :end-val="monitorOverview.userTotal" :duration="2000" />
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>

		<!-- 全系统总览列表 -->
		<yd-card>
			<div class="yd-card-header yd-flex">
				<div class="yd-card-title">
					<div class="yd-circle"></div>
					<span>全系统总览</span>
				</div>
				<el-button type="text" size="small" :disabled="exportDisable1" :loading="downloading1" @click="handleExportSys" style="margin-right: 16px">
					<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
				</el-button>
			</div>

			<div style="margin-top: 25px">
				<!-- 搜索条件 -->
				<!-- <el-form :model="formDatas.systemFormData" :inline="true">
					<el-form-item>
						<yd-time-range :config="{ enableCrossDay: true, defaultValue: 'last1h' }" @pickChange="handlePickChange"></yd-time-range>
					</el-form-item>
					<el-form-item>
						<el-button @click="searchHandler" type="primary">查询</el-button>
					</el-form-item>
				</el-form> -->
				<yd-form
					style="margin-bottom: 20px"
					:model="formDatas.systemFormData"
					:options="formOptions.systemFormOptions"
					@form-init="onForminited"
					@search="searchHandler"
				>
					<template #form-btn>
						<el-button @click="searchHandler" type="primary">查询</el-button>
					</template>
				</yd-form>

				<YdTable
					:formData="formDatas.systemFormData"
					:tableConfig="tableConfigs.systemOverviewConig"
					:tableData="tableDatas.systemOverviewData"
					@sizeChangeHandler="querySystemOverviewList"
					@currentChangeHandler="querySystemOverviewList"
					@sortChangeHandler="querySystemOverviewList"
				></YdTable>
			</div>
		</yd-card>

		<!-- 网端/业务总览列表 -->
		<div style="margin-top: 50px">
			<el-row :gutter="10">
				<el-col :span="14">
					<yd-card>
						<!-- <el-row> -->
						<div class="yd-card-header yd-flex">
							<div class="yd-card-title">
								<div class="yd-circle"></div>
								<span>业务总览-{{ systemTitle }}</span>
							</div>
							<div class="yd-flex1">
								<yd-form
									ref="businessForm"
									:model="formDatas.businessFormData"
									:options="formOptions.businessFormOptions"
									@change="handleBusinessChange"
								></yd-form>
								<el-button type="text" size="small" :disabled="exportDisable2" :loading="downloading2" @click="handleExportBusi">
									<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
								</el-button>
							</div>
							<!-- <el-select
									v-model="formDatas.businessFormData.businessCodeList"
									clearable
									filterable
									multiple
									collapse-tags
									@change="handleBusinessChange"
									placeholder="请选择业务"
									style="width: 85%"
									class="bpm-table-select"
									popper-class="bpm-select"
								>
									<el-option v-for="option in businessOptions" :key="option.id" :value="option.code" :label="option.label"></el-option>
								</el-select> -->
						</div>

						<!-- </el-row> -->
						<YdTable
							:formData="formDatas.businessFormData"
							:tableConfig="tableConfigs.businessOverviewConfig"
							:tableData="tableDatas.businessOverviewData"
							@sizeChangeHandler="queryBusinessOverview"
							@currentChangeHandler="queryBusinessOverview"
							@sortChangeHandler="queryBusinessOverview"
						></YdTable>
					</yd-card>
				</el-col>
				<el-col :span="10">
					<yd-card>
						<div class="yd-card-header yd-flex">
							<div class="yd-card-title">
								<div class="yd-circle"></div>
								<span>网端总览-{{ systemTitle }}</span>
							</div>
							<div class="yd-flex1">
								<!-- <el-select
									v-model="formDatas.segmentFormData.segmentIdList"
									clearable
									filterable
									multiple
									collapse-tags
									@change="handleSegmentChange"
									placeholder="请选择网端"
									style="width: 100%"
									class="bpm-table-select"
									popper-class="bpm-select"
								>
									<el-option v-for="option in segmentOptions" :key="option.id" :value="option.id" :label="option.label"></el-option>
								</el-select> -->
								<yd-form
									ref="segmentForm"
									:model="formDatas.segmentFormData"
									:options="formOptions.segmentFormOptions"
									@change="handleSegmentChange"
								></yd-form>
								<el-button type="text" size="small" :disabled="exportDisable3" :loading="downloading3" @click="handleExportSegment">
									<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
								</el-button>
							</div>
						</div>
						<YdTable
							:formData="formDatas.segmentFormData"
							:tableConfig="tableConfigs.segmentOverviewConfig"
							:tableData="tableDatas.segmentOverviewData"
							@sizeChangeHandler="querySegmentOverview"
							@currentChangeHandler="querySegmentOverview"
							@sortChangeHandler="querySegmentOverview"
						></YdTable>
					</yd-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup name="SystemOverview" lang="tsx">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { queryMonitorOverview } from '@/api/bpm/home/all_it_road';
import { parseTime, downloadFromBlob, toDecimalFormate } from '@/utils/common';
import { CountTo } from 'vue3-count-to';

import { querySystemOverview, exportSystemList } from '@/api/bpm/system/app_system';
import { queryBusinessOverviewListPage, exportBusinessList } from '@/api/bpm/business/business_overview';
import { querySegmentDataOverview, exportSegmentList } from '@/api/bpm/segment/segment_overview';

const instance = getCurrentInstance();
const proxy = instance?.proxy;

const router = useRouter();

// 选择的系统id
const selectSystemId = ref<number>();
// 选择的系统名称
const systemTitle = ref();
// 业务下拉
const businessOptions = ref([]);
// 网端下拉
const segmentOptions = ref<Array<any>>([]);
// 导出按钮
const downloading1 = ref(false);
const exportDisable1 = ref(false);
const downloading2 = ref(false);
const exportDisable2 = ref(false);
const downloading3 = ref(false);
const exportDisable3 = ref(false);
const downloadStartTime = ref('');
const downloadEndTime = ref('');
// 监控概况数据
let monitorOverview = ref({
	businessTotal: 0,
	businessUnhealthTotal: 0,
	businessVisitTotal: 0,
	businessVisitUnhealthTotal: 0,
	segmentTotal: 0,
	segmentUnhealthTotal: 0,
	systemTotal: 0,
	systemUnhealthTotal: 0,
	userTotal: 0,
});

// 表单实例
const businessForm = ref();
const segmentForm = ref();

// 表单配置
const formOptions = reactive<Record<string, FormOptionType>>({
	systemFormOptions: [
		{
			type: 'date-picker',
			label: '',
			prop: 'dateRange',
			span: 6,
			dateType: 'datetimerange',
			enableCrossDay: true,
			defaulShortcutsKey: 'last1h',
		},
	],
	businessFormOptions: [
		{
			prop: 'businessCodeList',
			label: '',
			span: 24,
			type: 'select',
			placeholder: '请选择业务',
			isInitOption: false,
			api: {
				name: 'queryBusinessOptions',
				params: selectSystemId,
			},
			attrs: {
				multiple: true,
			},
		},
	],
	segmentFormOptions: [
		{
			prop: 'segmentIdList',
			label: '',
			span: 24,
			type: 'select',
			placeholder: '请选择网端',
			isInitOption: false,
			api: {
				name: 'querySegmentOptions',
				params: selectSystemId,
			},
			attrs: {
				multiple: true,
			},
		},
	],
});

// 搜索表单数据
const formDatas = reactive<Record<string, FormModelType>>({
	systemFormData: {
		pageSize: 10,
		pageNum: 1,
		orderByColumn: 'healthRate',
		isAsc: 'asc',
	},
	businessFormData: {
		businessCodeList: [],
		pageSize: 10,
		pageNum: 1,
		orderByColumn: 'healthRate',
		isAsc: 'asc',
	},
	segmentFormData: {
		segmentIdList: [],
		pageSize: 10,
		pageNum: 1,
		orderByColumn: 'healthRate',
		isAsc: 'asc',
	},
});
// 列表配置
const tableConfigs = reactive<Record<string, TableConfigType>>({
	// 全系统总览列表配置
	systemOverviewConig: {
		columns: [
			{
				label: '系统名称',
				prop: 'name',
				width: 145,
				operation: [
					{
						text: undefined,
						rowKey: 'name',
						handler: (scope: any) => {
							selectSystemId.value = scope.row.id;
							systemTitle.value = scope.row.name;
							resetDataForm();
							queryBusinessOptions('businessCodeList', selectSystemId.value);
							querySegmentOptions('segmentIdList', selectSystemId.value);
							queryBusinessOverview();
							querySegmentOverview();
						},
					},
				],
			},
			{
				label: '监控业务数',
				prop: 'businessCount',
			},
			{
				label: '平均响应耗时',
				prop: 'avgDealTime',
				width: 135,
				sortable: true,
				formatter(row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '访问量',
				prop: 'visitCount',
				sortable: true,
			},
			{
				label: '失败访问量',
				prop: 'failVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'failVisitCount',
						color: '#fe5578',
						handler: (scope: any) => {
							let data = JSON.stringify({
								systemId: scope.row.id,
								startTime: formDatas.systemFormData.startTime,
								endTime: formDatas.systemFormData.endTime,
								dealState: 0,
							});
							router.push({
								path: '/business-monitor/monitor-query/business-list',
								query: {
									data,
								},
							});
						},
					},
				],
			},
			{
				label: '告警访问量',
				prop: 'alarmVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'alarmVisitCount',
						color: '#ff9a0c',
						handler: (scope: any) => {
							let data = JSON.stringify({
								systemId: scope.row.id,
								startTime: formDatas.systemFormData.startTime,
								endTime: formDatas.systemFormData.endTime,
								isAlarm: 1,
							});
							// isWhite('/business-monitor/monitor-query/business-list', {
							// 	data,
							// });
							router.push({
								path: '/business-monitor/monitor-query/business-list',
								query: {
									data,
								},
							});
						},
					},
				],
			},
			{
				label: '请求总数',
				prop: 'reqCount',
				sortable: true,
			},
			{
				label: '告警请求',
				prop: 'alarmCount',
				sortable: true,
				operation: [
					{
						rowKey: 'alarmCount',
						color: '#ff9a0c',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor-analysis/basic-alarm-merging-analysis',
								query: {
									data: JSON.stringify({
										systemId: scope.row.id,
										startTime: formDatas.systemFormData.startTime,
										endTime: formDatas.systemFormData.endTime,
									}),
								},
							});
						},
					},
				],
			},
			{
				label: '失败请求',
				prop: 'failReqCount',
				sortable: true,
				operation: [
					{
						rowKey: 'failReqCount',
						color: '#fe5578',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor-analysis/basic-alarm-merging-analysis',
								query: {
									data: JSON.stringify({
										systemId: scope.row.id,
										startTime: formDatas.systemFormData.startTime,
										endTime: formDatas.systemFormData.endTime,
										alarmStates: [0],
									}),
								},
							});
						},
					},
				],
			},
			{
				label: '成功率',
				prop: 'successRate',
				sortable: true,
				formatter(row: any, val: any) {
					if (val === null || val === '' || val === undefined) {
						return '-';
					} else {
						return val + '%';
					}
				},
			},
			{
				label: '健康度',
				prop: 'healthRate',
				sortable: true,
				renderXss: (row: any, val: any) => {
					/* eslint-disable */
					// @ts-ignore
					let a;
					if (val === null || val === '' || val === undefined) {
						return '-';
					} else {
						if (val >= 90) {
							// @ts-ignore: dd1
							return <span style="color: #30B08F">{val + '%'}</span>; //ts-ignore
						} else if (val >= 70) {
							return <span style="color: #FEC171">{val + '%'}</span>;
						} else {
							return <span style="color: #C03639">{val + '%'}</span>;
						}
					}
				},
			},
			{
				label: '操作',
				prop: '',
				operation: [
					{
						text: '详情',
						handler: (scope: any) => {
							// isWhite('/business-monitor/monitor/system-detail/index', {});
							router.push({
								path: '/business-monitor/monitor/system-detail/index',
								query: {
									data: JSON.stringify({
										systemId: scope.row.id,
										startTime: formDatas.systemFormData.startTime,
										endTime: formDatas.systemFormData.endTime,
									}),
								},
							});
						},
					},
				],
			},
		],
		pagination: {
			pageNum: 1,
			total: 0,
		},
		loading: false,
		disableOrderNumber: false,
	},
	// 业务总览列表配置
	businessOverviewConfig: {
		columns: [
			{
				label: '业务名称',
				prop: 'businessName',
				operation: [
					{
						text: undefined,
						rowKey: 'businessName',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor/business-detail/index',
								query: {
									systemId: scope.row.systemId,
									businessCode: scope.row.businessCode,
									startTime: formDatas.systemFormData.startTime,
									endTime: formDatas.systemFormData.endTime,
								},
							});
							// isWhite('/business-monitor/monitor/business-detail/index', {
							// 	systemId: scope.row.systemId,
							// 	businessCode: scope.row.businessCode,
							// 	startTime: formDatas.systemFormData.startTime,
							// 	endTime: formDatas.systemFormData.endTime,
							// });
						},
					},
				],
			},
			{
				label: '访问量',
				prop: 'visitCount',
				sortable: true,
			},
			{
				label: '交易量',
				prop: 'completeVisitCount',
				sortable: true,
			},
			{
				label: '平均响应耗时',
				prop: 'serverAvgResponseTime',
				sortable: true,
				width: 130,
				formatter(row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '失败数',
				prop: 'failVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'failVisitCount',
						color: '#fe5578',
						handler: (scope: any) => {
							let data = JSON.stringify({
								systemId: scope.row.systemId,
								startTime: formDatas.systemFormData.startTime,
								endTime: formDatas.systemFormData.endTime,
								businessCodeList: [scope.row.businessCode],
								dealState: 0,
							});
							// isWhite('/business-monitor/monitor-query/business-list', {
							// 	data,
							// });
							router.push({
								path: '/business-monitor/monitor-query/business-list',
								query: {
									data,
								},
							});
						},
					},
				],
			},
			{
				label: '告警数',
				prop: 'alarmVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'alarmVisitCount',
						color: '#ff9a0c',
						handler: (scope: any) => {
							let data = JSON.stringify({
								systemId: scope.row.systemId,
								startTime: formDatas.systemFormData.startTime,
								endTime: formDatas.systemFormData.endTime,
								businessCodeList: [scope.row.businessCode],
								isAlarm: 1,
							});
							// isWhite('/business-monitor/monitor-query/business-list', {
							// 	data,
							// });
							router.push({
								path: '/business-monitor/monitor-query/business-list',
								query: {
									data,
								},
							});
						},
					},
				],
			},
			{
				label: '成功率',
				prop: 'successRate',
				formatter(row: any, val: any) {
					return val + '%';
				},
				sortable: true,
			},
			{
				label: '健康度',
				prop: 'healthRate',
				sortable: true,
				renderXss: (row: any, val: any) => {
					if (val >= 90) {
						return <span style="color: #30B08F">{val + '%'}</span>;
					} else if (val >= 70) {
						return <span style="color: #FEC171">{val + '%'}</span>;
					} else {
						return <span style="color: #C03639">{val + '%'}</span>;
					}
				},
			},
		],
		pagination: {
			pageNum: 1,
			total: 0,
		},
		loading: false,
		disableOrderNumber: false,
	},
	// 网端总览列表配置
	segmentOverviewConfig: {
		columns: [
			{
				label: '网端名称',
				prop: 'segmentName',
				operation: [
					{
						text: undefined,
						rowKey: 'segmentName',
						handler: (scope: any) => {
							// isWhite('/business-monitor/monitor/network-detail/index', {
							// 	systemId: selectSystemId.value,
							// 	startTime: formDatas.systemFormData.startTime,
							// 	endTime: formDatas.systemFormData.endTime,
							// 	segmentName: scope.row.segmentName,
							// 	segmentId: scope.row.id,
							// });
							router.push({
								path: '/business-monitor/monitor/network-detail/index',
								query: {
									systemId: selectSystemId.value,
									startTime: formDatas.systemFormData.startTime,
									endTime: formDatas.systemFormData.endTime,
									segmentName: scope.row.segmentName,
									segmentId: scope.row.id,
								},
							});
						},
					},
				],
			},
			{
				label: '请求总量',
				prop: 'reqCount',
				sortable: true,
			},
			{
				label: '失败请求',
				prop: 'failReqCount',
				sortable: true,
				operation: [
					{
						rowKey: 'failReqCount',
						color: '#fe5578',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor-analysis/basic-alarm-merging-analysis',
								query: {
									data: JSON.stringify({
										systemId: selectSystemId.value,
										segmentIds: [scope.row.id],
										startTime: formDatas.systemFormData.startTime,
										endTime: formDatas.systemFormData.endTime,
										alarmStates: [0],
									}),
								},
							});
						},
					},
				],
			},
			{
				label: '告警请求',
				prop: 'alarmReqCount',
				sortable: true,
				operation: [
					{
						rowKey: 'alarmReqCount',
						color: '#ff9a0c',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor-analysis/basic-alarm-merging-analysis',
								query: {
									systemId: selectSystemId.value,
									segmentIds: scope.row.id,
									startTime: formDatas.systemFormData.startTime,
									endTime: formDatas.systemFormData.endTime,
								},
							});
						},
					},
				],
			},
			{
				label: '健康度',
				prop: 'healthRate',
				sortable: true,
				renderXss: (row: any, val: any) => {
					if (val >= 90) {
						return <span style="color: #30B08F">{val + '%'}</span>;
					} else if (val >= 70) {
						return <span style="color: #FEC171">{val + '%'}</span>;
					} else {
						return <span style="color: #C03639">{val + '%'}</span>;
					}
				},
			},
		],
		pagination: {
			pageNum: 1,
		},
		loading: false,
		disableOrderNumber: false,
	},
});

// 列表数据
const tableDatas = reactive<Record<string, TableOptionType[]>>({
	// 系统总览数据
	systemOverviewData: [],
	// 业务总览数据
	businessOverviewData: [],
	segmentOverviewData: [],
});

const onForminited = (_model: FormModelType) => {
	renderMonitorOverview();
	searchHandler();
};

const searchHandler = () => {
	formDatas.systemFormData.pageNum = 1;
	formDatas.businessFormData.pageNum = 1;
	formDatas.segmentFormData.pageNum = 1;
	querySystemOverviewList();
	// querySe
};

// 重置搜索表单
const resetDataForm = () => {
	formDatas.businessFormData.businessCodeList = [];
	formDatas.segmentFormData.segmentIdList = [];
};
// 获取业务下拉列表
/**
 * 设置某一项的字典
 * @prop key
 * @params 请求参数
 *  */
const queryBusinessOptions = (prop: string, params: any) => {
	businessForm.value?.setOptions(prop, params);
};
// 获取网端下拉列表
const querySegmentOptions = (prop: string, params: any) => {
	console.log('querySegmentOptions', querySegmentOptions);
	segmentForm.value?.setOptions(prop, params);
};
// 业务下拉项监听
const handleBusinessChange = (option: BaseOptionType, value: any) => {
	if (option.prop === 'businessCodeList') {
		queryBusinessOverview();
	}
};
// 网端下拉项监听
const handleSegmentChange = (option: BaseOptionType, value: any) => {
	if (option.prop === 'segmentIdList') {
		console.log('option', option);
		console.log('handleSegmentChange', value);

		querySegmentOverview();
	}
};
// 渲染监控概况
const renderMonitorOverview = () => {
	queryMonitorOverview({
		dateTime: parseTime(new Date(), '{y}-{m}-{d}'),
	}).then((res: ApiResponse) => {
		if (res.code !== 0) {
			// 接口报错
			proxy?.$message.warning(res.msg);
			return;
		}
		monitorOverview.value = res.data;
	});
};
// 获取系统总览列表数据
const querySystemOverviewList = () => {
	tableConfigs.systemOverviewConig.loading = true;
	downloadStartTime.value = formDatas.systemFormData.startTime;
	downloadEndTime.value = formDatas.systemFormData.endTime;

	querySystemOverview(formDatas.systemFormData).then((res) => {
		tableConfigs.systemOverviewConig.loading = false;
		if (res.code !== 0) {
			tableConfigs.systemOverviewConig.loading = false;
			tableDatas.systemOverviewData = [];
			tableConfigs.systemOverviewConig.pagination!.total = 0;
			// tableDatas.systemOverviewData.total = 0;

			tableDatas.businessOverviewData = [];
			tableConfigs.businessOverviewData.pagination!.total = 0;

			tableDatas.segmentOverviewData = [];
			tableConfigs.segmentOverviewData.pagination!.total = 0;

			proxy?.$message.warning(res.msg);
			return;
		}
		tableDatas.systemOverviewData = res.data.data;
		tableConfigs.systemOverviewConig.pagination!.total = res.data.total;
		//如果有数据,则默认第一个系统请求业务/网端数据
		if (tableDatas.systemOverviewData.length > 0) {
			selectSystemId.value = tableDatas.systemOverviewData[0].id as number;
			systemTitle.value = tableDatas.systemOverviewData[0].name;
			queryBusinessOptions('businessCodeList', selectSystemId.value);
			queryBusinessOverview();
			querySegmentOptions('segmentIdList', selectSystemId.value);
			querySegmentOverview();
			exportDisable1.value = false;
		} else {
			exportDisable1.value = true;
			exportDisable2.value = true;
			exportDisable3.value = true;
		}
		if (!(res.msg === 'success')) {
			proxy?.$message.warning(res.msg);
		}
	});
};
// 获取业务总览列表数据
const queryBusinessOverview = () => {
	if (selectSystemId.value === 0) {
		return;
	}
	tableConfigs.businessOverviewConfig.loading = true;
	formDatas.businessFormData.systemId = selectSystemId.value;
	formDatas.businessFormData.startTime = formDatas.systemFormData.startTime;
	formDatas.businessFormData.endTime = formDatas.systemFormData.endTime;
	queryBusinessOverviewListPage(formDatas.businessFormData).then((res) => {
		tableConfigs.businessOverviewConfig.loading = false;
		console.log(2222, res);
		if (res.code !== 0) {
			tableConfigs.businessOverviewConfig.loading = false;
			tableDatas.businessOverviewData = [];
			tableConfigs.businessOverviewConfig.pagination!.total = 0;
			proxy?.$message.warning(res.msg);
			console.log(3333, res.data.data);
			return;
		}
		console.log(1111, res.data.data);
		tableDatas.businessOverviewData = res.data.data;
		tableConfigs.businessOverviewConfig.pagination!.total = res.data.total;
		if (tableConfigs.businessOverviewConfig.pagination?.total! <= 0) {
			exportDisable2.value = true;
		} else {
			exportDisable2.value = false;
		}

		if (!(res.msg === 'success')) {
			proxy?.$message.warning(res.msg);
		}
	});
};
// 获取网端总览列表数据
const querySegmentOverview = () => {
	if (selectSystemId.value === 0) {
		return;
	}
	tableConfigs.segmentOverviewConfig.loading = true;
	formDatas.segmentFormData.systemId = selectSystemId.value;
	formDatas.segmentFormData.startTime = formDatas.systemFormData.startTime;
	formDatas.segmentFormData.endTime = formDatas.systemFormData.endTime;
	let segmentIdList = formDatas.segmentFormData.segmentIdList;
	segmentIdList = segmentIdList?.map((item: any) => {
		if (item !== undefined && item !== '') {
			return Number(item);
		} else {
			return item;
		}
	});

	querySegmentDataOverview({ ...formDatas.segmentFormData, segmentIdList }).then((res: ApiResponse) => {
		tableConfigs.segmentOverviewConfig.loading = false;
		if (res.code !== 0) {
			tableConfigs.segmentOverviewConfig.loading = false;
			tableDatas.segmentOverviewData = [];
			tableConfigs.segmentOverviewConfig.pagination!.total = 0;
			proxy?.$message.warning(res.msg);
			return;
		}
		tableDatas.segmentOverviewData = res.data.data;
		tableConfigs.segmentOverviewConfig.pagination!.total = res.data.total;

		if (tableConfigs.segmentOverviewConfig.pagination?.total! <= 0) {
			exportDisable3.value = true;
		} else {
			exportDisable3.value = false;
		}

		if (!(res.msg === 'success')) {
			proxy?.$message.warning(res.msg);
		}
	});
};
// 导出全系统总览列表数据
const handleExportSys = () => {
	const d = JSON.parse(JSON.stringify(formDatas.systemFormData));
	d.pageNum = undefined;
	d.pageSize = undefined;
	downloading1.value = true;
	d.startTime = downloadStartTime.value;
	d.endTime = downloadEndTime.value;

	exportSystemList(d).then((res) => {
		downloading1.value = false;
		downloadFromBlob(res, '全系统监控总览列表').then((o: any) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
};
// 导出业务总览列表数据
const handleExportBusi = () => {
	const d = JSON.parse(JSON.stringify(formDatas.businessFormData));
	d.pageNum = undefined;
	d.pageSize = undefined;
	d.startTime = downloadStartTime.value;
	d.endTime = downloadEndTime.value;
	downloading2.value = true;
	exportBusinessList(d).then((res) => {
		downloading2.value = false;
		downloadFromBlob(res, '业务概况列表').then((o: any) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
};
// 导出网端总览列表数据
const handleExportSegment = () => {
	const d = JSON.parse(JSON.stringify(formDatas.segmentFormData));
	d.pageNum = undefined;
	d.pageSize = undefined;
	d.startTime = downloadStartTime.value;
	d.endTime = downloadEndTime.value;
	d.systemName = systemTitle.value;
	downloading3.value = true;
	exportSegmentList(d).then((res) => {
		downloading3.value = false;
		downloadFromBlob(res, '系统网端总览列表').then((o: any) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* 监控概况卡片 */
.monitor-overview-card {
	background-image: url('@/assets/images/bpm/home/all_it_road_card.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: #ffffff;
	font-size: 14px;
	padding: 22px 22px 22px 15%;
	height: 130px;
}

/* 监控概况标题 */
.monitor-overview-title {
	color: #2beded;
	font-size: 16px;
}

/* 监控概况卡片-文本行 */
.monitor-overview-card .el-row {
	margin-bottom: 8px;
}

/* 监控概况-不健康-文本 */
.monitor-overview-unhealth-text {
	color: #ff9a0c;
	text-align: right;
}
/* 监控概况-总数-文本 */
.monitor-overview-total-text {
	color: #ffffff;
	text-align: right;
}
.circle {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	margin-right: 8px;
	background-color: #2beded;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.title-label {
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
}
.card {
	background-color: rgba(29, 39, 75, 0.31);
	border: unset;
	border-radius: 12px;
	padding: 10px;
}
.icon-cls {
	width: 20px;
	height: 20px;
	color: #00ffff !important;
}
:deep(.el-form-item) {
	margin-bottom: 0;
}
</style>
